<template>
  <div class="detail">
    <el-button
      class="btn_back"
      type="primary"
      plain
      icon="el-icon-d-arrow-left"
      @click="backLastPage"
      >返回</el-button
    >
    <h2>{{ this.$route.params.examName }}</h2>
    <el-table
      size="medium"
      :data="tableData"
      v-loading="tableLoading"
      border
      stripe
      style="width: 100%"
    >
      <template slot="empty">
        <span>暂无数据~~~</span>
      </template>
      <el-table-column align="center" label="题目序号" prop="id" fixed>
      </el-table-column>
      <el-table-column align="center" label="题目类型" fixed>
        <template v-slot="{ row }">
          <span v-if="row.examProblemType === 2">选择题</span>
          <span v-if="row.examProblemType === 3">判断题</span>
          <span v-if="row.examProblemType === 1">编程题</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="题目分数" prop="score" fixed>
      </el-table-column>
      <el-table-column align="center" label="作答情况" prop="id" fixed>
        <template v-slot="{ row }">
          <i v-if="row.result === 0" class="danger">错误</i>
          <i v-if="row.result === 1" class="success">正确</i>
        </template>
      </el-table-column>
      <el-table-column align="center" label="你的答案" fixed>
        <template v-slot="{ row }">
          <el-button
            v-if="row.examProblemType === 1"
            @click="handleClick(row)"
            type="text"
            size="small"
            icon="el-icon-search"
            >查看</el-button
          >
          <span v-else class="success">{{ row.answer }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="查看代码"
      :visible.sync="dialogVisible"
      width="70%"
      append-to-body
    >
      <div class="code-text">
        <codeHeightLight :sourceCode="sourceCode" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-tag type="primary" @click="dialogVisible = false">确 定</el-tag>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import codeHeightLight from "@/components/codeHighlight.vue";
import { getTestAnswer } from "@/api/task";

export default {
  name: "viewAnswer",
  components: {
    codeHeightLight
  },
  data() {
    return {
      userId: null,
      examId: null,
      tableLoading: false,
      tableData: [],
      sourceCode: "",
      dialogVisible: false
    };
  },

  created() {
    console.log("dhasj");
    this.userId = this.$route.params.userId;
    this.examId = this.$route.params.examId;
    this.getAnswer();
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy();
    next();
  },
  methods: {
    // 返回上一层页面
    backLastPage() {
      this.$router.go(-1);
    },
    handleClick(row) {
      this.sourceCode = row.answer;
      this.dialogVisible = true;
    },
    // 获取表格
    async getAnswer() {
      this.tableLoading = true;
      const res = await getTestAnswer({
        userId: this.userId,
        examId: this.examId
      });
      this.tableData = res.data;
      this.tableLoading = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.detail {
  position: relative;
}
h2 {
  font-size: 26px;
}
h3 {
  font-size: 18px;
}
.el-table {
  position: absolute;
  margin-top: 0.2rem;
  margin-bottom: 0.1rem;
}
.dialog-footer {
  cursor: pointer;
}
.code-text {
  white-space: pre;
  font-size: 20px;
}
.btn_back {
  width: 100px;
  height: 50px;
  font-size: 18px;
  position: absolute;
  left: 30px;
  top: -10px;
  border-radius: 10px;
}
i.success {
  font-style: normal;
  font-size: 16px;
  color: #67c23a;
}
i.danger {
  font-style: normal;
  font-size: 16px;
  color: #f56c6c;
}
</style>
